<template>
  <div class="test-page">
    <h1>名字生成测试</h1>
    
    <div class="test-section">
      <h2>测试输入</h2>
      <div class="test-inputs">
        <input v-model="testInput.birthDate" type="date" placeholder="出生日期" />
        <select v-model="testInput.gender">
          <option value="男孩">男孩</option>
          <option value="女孩">女孩</option>
        </select>
        <input v-model="testInput.surname" type="text" placeholder="姓氏" />
        <button @click="testGenerate">测试生成</button>
      </div>
    </div>
    
    <div class="test-section" v-if="testResults.length > 0">
      <h2>测试结果</h2>
      <div class="test-results">
        <div v-for="name in testResults" :key="name.fullName" class="test-result">
          <h3>{{ name.fullName }}</h3>
          <p>寓意: {{ name.meaning }}</p>
          <p>五行: {{ name.wuxing }}</p>
          <p>生肖: {{ name.zodiac }}</p>
          <p>评分: {{ name.score }}分</p>
          <p>分析: {{ name.analysis }}</p>
        </div>
      </div>
    </div>
    
    <div class="test-section">
      <h2>调试信息</h2>
      <pre>{{ debugInfo }}</pre>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue';
import { generateNames } from '@/utils/nameGenerator';
import type { UserInput, GeneratedName } from '@/utils/nameGenerator';

const testInput = reactive<UserInput>({
  birthDate: '2024-01-01',
  timePeriod: '',
  gender: '男孩',
  surname: '王'
});

const testResults = ref<GeneratedName[]>([]);
const debugInfo = ref('');

const testGenerate = () => {
  try {
    debugInfo.value = `开始测试生成名字...\n输入: ${JSON.stringify(testInput, null, 2)}\n`;
    
    const results = generateNames(testInput, 3);
    testResults.value = results;
    
    debugInfo.value += `生成成功！\n结果: ${JSON.stringify(results, null, 2)}\n`;
  } catch (error) {
    debugInfo.value += `生成失败: ${error}\n`;
    console.error('测试生成失败:', error);
  }
};
</script>

<style scoped>
.test-page {
  max-width: 800px;
  margin: 0 auto;
  padding: 2rem;
}

.test-section {
  margin-bottom: 2rem;
  padding: 1rem;
  border: 1px solid #ddd;
  border-radius: 8px;
}

.test-inputs {
  display: flex;
  gap: 1rem;
  margin-bottom: 1rem;
}

.test-inputs input,
.test-inputs select {
  padding: 0.5rem;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.test-inputs button {
  padding: 0.5rem 1rem;
  background: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.test-results {
  display: grid;
  gap: 1rem;
}

.test-result {
  padding: 1rem;
  border: 1px solid #eee;
  border-radius: 4px;
  background: #f9f9f9;
}

.test-result h3 {
  margin: 0 0 0.5rem 0;
  color: #333;
}

.test-result p {
  margin: 0.25rem 0;
  color: #666;
}

pre {
  background: #f5f5f5;
  padding: 1rem;
  border-radius: 4px;
  overflow-x: auto;
  white-space: pre-wrap;
  font-size: 0.9rem;
}
</style> 